import IconFont from '@/assets/iconfont';
import TopTabs from './topTabs';
import Account from '@/views/account';
import Listen from '@/views/listen';
import Found from '@/views/found';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import {StyleSheet} from 'react-native';
const style = StyleSheet.create({
  tabNv: {
    backgroundColor: 'transparent',
  },
});
// 创建底部Tab
const Tab = createBottomTabNavigator();
function BottomTabs() {
  return (
    <Tab.Navigator
      sceneContainerStyle={style.tabNv}
      screenOptions={{
        headerTintColor: 'white',
        headerStyle: {backgroundColor: 'tomato'},
        // 点击的颜色
        tabBarActiveTintColor: '#f86442',
      }}>
      <Tab.Screen
        name="TopTabs"
        component={TopTabs}
        options={{
          tabBarLabel: '首页',
          headerTitle: '首页',
          tabBarIcon: ({color, size}) => (
            <IconFont name="icon-shouye" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Listen"
        options={{
          tabBarLabel: '我听',
          headerTitle: '我听',
          tabBarIcon: ({color, size}) => (
            <IconFont name="icon-yinle" size={size} color={color} />
          ),
        }}>
        {props => <Listen {...props} />}
      </Tab.Screen>
      <Tab.Screen
        name="Account"
        options={{
          tabBarLabel: '我的',
          headerTitle: '我的',
          tabBarIcon: ({color, size}) => (
            <IconFont name="icon-shouye1" size={size} color={color} />
          ),
        }}>
        {props => <Account {...props} />}
      </Tab.Screen>
      <Tab.Screen
        name="Found"
        options={{
          tabBarLabel: '发现',
          headerTitle: '发现',
          tabBarIcon: ({color, size}) => (
            <IconFont name="icon-faxian" size={size} color={color} />
          ),
        }}>
        {props => <Found {...props} />}
      </Tab.Screen>
    </Tab.Navigator>
  );
}

export default BottomTabs;
